<template>
  <div id="switch-tenant-page" class="switch-tenant-box">
    <mobileNavbar :name="$t('message.userInfo.switchTenant')" @back="handleBack" ref="navbar"></mobileNavbar>
    <div class="current-tenant-box">
      <div class="title">{{$t('message.mobile.currentTenant')}}</div>
      <div class="tenant-item">
        <img class="tenant-logo" :src="currentSwitch.icon">
        <div class="tenant-name">{{currentSwitch.shortName}}</div>
        <div class="check-box">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#keowledge-mobile-gou"></use>
          </svg>
        </div>
      </div>
    </div>
    <div class="fill-dirver-line"></div>
    <div class="switch-tenant-list">
      <vue-scroll :ops="{bar: {background: '#cecece',onlyShowBarOnScroll:false,minSize:0.1},pushLoad:true}">
        <div class="tenant-item" v-for="(item,index) in switchList" :key="index"  @click="tenantLoginHandle(item)">
          <img class="tenant-logo" :src="item.icon">
          <div class="tenant-name">{{item.shortName}}</div>
          <div class="check-box"></div>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileNavbar from './mobileNavbar.vue';
import { getStore } from '@/utils/store'
import useUserInfoStore from '@/store/userInfo';
import { useRouter } from "vue-router"
const router = useRouter();
const userStore = useUserInfoStore()
const emit = defineEmits([""])
const props = defineProps({
  type:{
    type:String,
  }
})
const navbar = ref()
const currentSwitch = ref({})
const switchList = ref([])
const submitLoading = ref(false)
const myInfo = ref({})
onMounted(()=>{
  myInfo.value = getStore({name:'userInfo'})
  submitLoading.value = false
  switchList.value = myInfo.value.tenants.filter(item=>{
    if(item.id==myInfo.value.tenantId){
      currentSwitch.value = item
    }
    return item.id!=myInfo.value.tenantId
  })
})
function tenantLoginHandle(item){
  freshToken(item.id)
}
// 登录成功写入数据
function setUserInfoData (data) {
  if(data) {
    userStore.batchSetStore(data)
    userStore.setTenantId(data.userDto.tenantId)
    userStore.setTenantInfo(data.userDto.tenant)
    navbar.value.back()
  }
}
// 刷新token
function freshToken (id) {
  userStore.refreshToken(id).then(res=>{
    if(props.type=='tenant'){
      setUserInfoData(res)
    }else{
      window.parent.postMessage({command: 'fresh'}, '*')
    }
  }).catch(() => {
    userStore.LogOut().then(() => {
      router.push({ path: "/mobile/login" });
      window.parent.postMessage({command: 'loginOut'}, '*')
    })
  })
}
function handleBack(val){
  router.push(val)
}
</script>
<style lang="scss" scoped>
.switch-tenant-box{
  height: 100%;
  .fill-dirver-line{
    height: .625rem;
    background: #F5F6F7;
  }
  .current-tenant-box{
    .title{
      padding: 0px .9375rem;
      @include SourceHanSansCN-Regular;
      font-size: 1rem;
      color: #363B4c;
    }
    .tenant-item{
      .tenant-name{
        @include SourceHanSansCN-Medium;
        color: #1E6FFF;
      }
    }
  }
  .switch-tenant-list{
    position: relative;
    height: calc(100% - 10.625rem);
    width: 100%;
    .tenant-item{
      border-bottom: .0625rem solid #eeeff0;
    }
  }
  .tenant-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px .9375rem;
    height: 5.75rem;
    width: calc(100vw - 1.875rem);
    .tenant-logo{
      width: 2.75rem;
      height: 2.75rem;
    }
    .tenant-name{
      @include SourceHanSansCN-Regular;
      font-size: 1rem;
      color: #363B4c;
      max-width: calc(100% - 4.75rem);
      width: calc(100% - 4.75rem);
      margin-left: 1rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .check-box{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      .icon{
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>